<template>
  <div class="detail-view">
    <el-descriptions
      :title="title"
      :column="column"
      :size="size"
      :border="border"
      :direction="direction"
      :class="{ 'is-vertical': direction === 'vertical' }"
    >
      <template v-if="$slots.extra" #extra>
        <slot name="extra"></slot>
      </template>
      
      <slot></slot>
      
      <template v-for="(item, index) in items" :key="index">
        <el-descriptions-item :label="item.label" :span="item.span || 1" :class="{ 'is-empty': isEmpty(item.value) }">
          <template v-if="!isEmpty(item.value)">
            <!-- 图片类型 -->
            <template v-if="item.type === 'image'">
              <el-image
                :src="item.value"
                :preview-src-list="[item.value]"
                fit="cover"
                class="detail-image"
                :style="{ width: item.width || '80px', height: item.height || '80px' }"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </template>
            
            <!-- 标签类型 -->
            <template v-else-if="item.type === 'tag'">
              <el-tag
                :type="typeof item.tagType === 'function' ? item.tagType(item.value) : item.tagType"
                :effect="item.tagEffect || 'light'"
              >
                {{ item.formatter ? item.formatter(item.value) : item.value }}
              </el-tag>
            </template>
            
            <!-- 日期时间类型 -->
            <template v-else-if="item.type === 'datetime'">
              {{ formatDateTime(item.value, item.format || 'YYYY-MM-DD HH:mm:ss') }}
            </template>
            
            <!-- 文本类型（默认） -->
            <template v-else>
              <span :class="{ 'detail-link': item.link }">
                {{ item.formatter ? item.formatter(item.value) : item.value }}
              </span>
            </template>
          </template>
          
          <!-- 空值显示 -->
          <template v-else>
            <span class="detail-empty">{{ emptyText }}</span>
          </template>
        </el-descriptions-item>
      </template>
    </el-descriptions>
    
    <div v-if="$slots.footer" class="detail-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 每行的字段数量
  column: {
    type: Number,
    default: 3
  },
  // 尺寸
  size: {
    type: String,
    default: 'default'
  },
  // 是否展示边框
  border: {
    type: Boolean,
    default: true
  },
  // 排列方向
  direction: {
    type: String,
    default: 'horizontal'
  },
  // 详情数据项
  items: {
    type: Array,
    default: () => []
  },
  // 空数据占位符
  emptyText: {
    type: String,
    default: '--'
  }
})

// 判断值是否为空
const isEmpty = (value) => {
  return value === undefined || value === null || value === '';
}

// 格式化日期时间
const formatDateTime = (value, format) => {
  if (isEmpty(value)) return props.emptyText;
  return dayjs(value).format(format);
}
</script>

<style scoped>
.detail-view {
  width: 100%;
}

.is-vertical {
  display: flex;
  flex-direction: column;
}

.detail-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.detail-image {
  border-radius: 4px;
  cursor: pointer;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 20px;
}

.detail-link {
  color: var(--el-color-primary);
  cursor: pointer;
}

.detail-empty {
  color: #c0c4cc;
}

:deep(.is-empty) .el-descriptions-item__content {
  color: #c0c4cc;
}
</style> 